<template>
  <div class="pageBox">
    <head-component title="个人信息"></head-component>

    <div class="tips">请设置2~20个字符，不包含无效字符</div>

    <div class="iptBox flex">
      <input type="text" v-model="form.nickname" placeholder="请输入昵称" />
    </div>

    <button class="sure">确认</button>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, reactive } from "vue";
import headComponent from "../../components/headComponent.vue";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const form = reactive({
      nickname: "",
    });
    return {
      form,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 88px;
  .tips {
    font-size: 24px;
    font-weight: 400;
    color: #999999;
    padding: 14px 30px 23px;
  }
  .iptBox {
    height: 122px;
    background-color: #fff;
    padding: 0 30px;
    align-items: center;
    input {
      border: none;
      background-color: transparent;
      font-size: 28px;
      font-weight: 400;
      color: #333333;
    }
  }
  .sure {
    width: 92%;
    height: 88px;
    background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
    border-radius: 16px;
    font-size: 32px;
    font-weight: 500;
    color: #ffffff;
    margin: 310px auto 0;
    display: block;
    border: none;
  }
}
</style>